// Tabbar
import React, { Component } from 'react';
import styles from './index.module.scss'

class index extends Component {
    state = {
        activeTab: "index"
    }
    handleClick = (activeTab) => {
        if (activeTab === "index") {
            this.props.history.push("/");
        } else {
            this.props.history.push("/" + activeTab);
        }
        this.setState({
            activeTab
        })
    }
    render() {
        return (
            <div className={styles.Tabbar}>
                <div className={styles.Tabbar_content}>
                    {this.props.children}
                </div>

                <div className={styles.nav_titles}>
                    <div onClick={this.handleClick.bind(this, "index")} className={styles.nav_list_item}>
                        <i className={this.state.activeTab === "index" ? "icon icon-home-o" : "icon icon-home"}></i>
                        <span className={this.state.activeTab === "index" ? "title active" : "title"}>首页</span>
                    </div>
                    <div onClick={this.handleClick.bind(this, "community")} className={styles.nav_list_item}>
                        <i className={this.state.activeTab === "community" ? "icon icon-community-o" : "icon icon-community"} ></i>
                        <span className={this.state.activeTab === "community" ? "title active" : "title"}>社区</span>
                    </div>
                    <div onClick={this.handleClick.bind(this, "cart")} className={styles.nav_list_item}>
                        <i className={this.state.activeTab === "cart" ? "icon icon-cart-o" : "icon icon-cart"} ></i>
                        <span className={this.state.activeTab === "cart" ? "title active" : "title"}>购物车</span>
                    </div>
                    <div onClick={this.handleClick.bind(this, "my")} className={styles.nav_list_item}>
                        <i className={this.state.activeTab === "my" ? "icon icon-my-o" : "icon icon-my"} ></i>
                        <span className={this.state.activeTab === "my" ? "title active" : "title"}>我的</span>
                    </div>
                </div>
            </div>

        );
    }
}

export default index;
